<template>
  <div class="HotGoodCard">
    <router-link
      :to="'/detail?id=' + item.id"
    >
      <van-card :thumb="item.image">
        <template #title>
          <div class="top">
            <span class="title">{{ item.store_name }}</span>
            <span class="price" v-if="$route.path != '/promotion'">￥{{ item.price }}</span>
            <div v-else>
            <span class="promotionprice" >促销价：￥{{ item.price }}</span>
            </div>
          </div>
        </template>
        <template #price>
          <template v-if="$route.path != '/promotion'">
              <span class="vip">￥{{ item.vip_price }}</span>
          <i class="vip_icon"></i>
          <span class="soldout">已售{{ item.sales }}</span>
          </template>
          
          <s class="regulat" v-else>日常价：{{ item.ot_price }}</s>
        </template>
        <template #num>
          <van-icon name="cart-circle-o" color="#ff404a" size="0.5rem" v-if="$route.path != '/promotion'"/>
          <span class="residue" v-else>仅剩：{{ item.stock }}</span>
        </template>
      </van-card>
    </router-link>
  </div>
</template>

<script>
export default {
    props:['item'],
};
</script>

<style lang="less">
.HotGoodCard {
    width: 100%;
  .van-card {
    background-color: #fff;
    padding-left: 0;
    padding-right: 0;
    .van-card__thumb {
      margin-right: 0;
      .van-image__error,
      .van-image__img,
      .van-image__loading {
        width: auto;
        height: 90%;
      }
    }
    .van-card__content {
      > div {
        &:nth-of-type(1) {
          flex: 1;
          .top {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title {
              width: 100%;
              font-size: 14px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .price {
              font-weight: bold;
              font-size: 15px;
              color: red;
            }
            .promotionprice {
              color: white;
              background-color: #ff4020;
              padding: 5px 10px;
              border-radius: 12px 0 12px 0;
            }
          }
        }
      }
      .van-card__bottom {
        height: 0.6rem;
        line-height: normal;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .van-card__price {
          font-size: 12px;
          .vip {
            font-weight: bold;
          }
          .vip_icon {
            width: 23px;
            height: 10px;
            display: inline-block;
            background-image: url();
            background-size: cover;
            margin: 0 10px 0 5px;
          }
          .soldout {
            color: #aab2c8;
          }
          .regulat {
            color: #999999;
          }
        }
      }
    }
  }
  .van-card:not(:first-child) {
    margin-top: 0;
  }
}
</style>